<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="详情"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="900"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :model="formData" size="mini" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="附件类型:" size="mini" prop="attachmentType">
                <span>{{ formData.attachmentType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块:" size="mini" prop="belongModel">
                <span>{{ formaterData(belongModelList, formData.belongModel) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件对应文件类型:" size="mini" prop="fileType">
                <span>{{ formData.fileType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="启用状态:" size="mini" prop="enable">
                <span>{{ formaterData(enableList, formData.enable) }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <c-table-box :data="tableData" :table-max-height="400" hide-func :table-config="tableConfig" v-bind="$attrs" />
          <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="urlList"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { getAnnexDetail } from '@/api/basicData'
import { getShopAttachment } from '@/api/decorate'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'AnnexConfigDetail',
  components: { ElImageViewer },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      attachmentTypeList: [],
      belongModelList: [],
      enableList: [
        { dictName: '启用', dictCode: 1 },
        { dictName: '停用', dictCode: 0 }
      ],
      formData: {},
      showViewer: false,
      urlList: [],
      fileTypeList: [],
      tableData: [],
      tableConfig: {
        setting: [
          {
            prop: 'attachmentName',
            label: '附件名称'
          },
          // {
          //   prop: 'attachmentType',
          //   label: '附件类型'
          // },
          {
            prop: 'createBy',
            label: '上传人'
          },
          {
            prop: 'createTime',
            label: '上传时间'
          },
          {
            label: '操作',
            type: 'hidden',
            minWidth: '180',
            button: [
              {
                name: '查看预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '附件下载',
                clickFun: this.downLoadFile,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll(['BELONG_MODEL', 'ATTACHMENT_TYPE']).then(res => {
      this.belongModelList = res.BELONG_MODEL
      this.attachmentTypeList = res.ATTACHMENT_TYPE
    })
    if (this.detailData.data) {
      getAnnexDetail(this.detailData.data.id).then(res => {
        if (res.success) {
          this.formData = res.data
        }
      })
      this.getFiles(this.detailData.data.id)
    }
  },
  methods: {
    // 获取附件
    getFiles(id) {
      getShopAttachment(id).then(res => {
        this.tableData = res.data
      })
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr || !arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
      this.urlList = []
    },
    handlePreview(file) {
      this.urlList = []
      const typeName = file.typeName || file.attachmentUrl.split('.')[1]
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.showViewer = true
        const picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        this.urlList.push(picUrl)
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        // word,excel预览
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    getFileData(file) {
      const t = {
        ...file,
        attachmentName: file.attachmentName || '',
        attachmentUrl: file.attachmentUrl || '',
        createBy: file.createBy || '',
        createTime: file.createTime || '',
        id: file.id || file.uid,
        typeName: file.typeName || (file.attachmentUrl || '').split('.').pop(),
        belongModel: file.belongModel || '',
        attachmentType: file.attachmentType || '',
        configAttachmentId: file.configAttachmentId || ''
      }
      delete t.raw
      return t
    },
    downLoadFile(row) {
      const v = this.getFileData(row)
      this.$downFile(v)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-icon-circle-close:before{
  color: white
}
</style>
